import React, {Component} from 'react';
import SwipeableViews from 'react-swipeable-views';
import { autoPlay } from 'react-swipeable-views-utils';
const AutoPlaySwipeableViews = autoPlay(SwipeableViews);
const styles = {
    root: {
        position: 'relative',
    },

    slide0: {
        backgroundColor: '#000',
    },
    slide1: {
        backgroundColor: '#F00408',
    },
    slide2: {
        backgroundColor: '#DC2900',
    },
    slide3: {
        backgroundColor: '#D2E9F1',
    },
    slide4: {
        backgroundColor: '#137FDA',
    },
    slide5: {
        backgroundColor: '#C8B49C',
    },
    slide6: {
        backgroundColor: '#CDCDCD',
    },
    slide7: {
        backgroundColor: '#C4537F',
    },
    slide8: {
        backgroundColor: '#711313',
    },

};

class Banner extends Component {
    constructor(props) {
        super(props);
        this.state={
            index:0
        }
    }
    handleChangeIndex = index => {
        this.setState({
            index,
        });
    };

    componentDidMount() {

    }


    render() {
        const { index } = this.state;
        return (
            <div style={styles.root}>
                <AutoPlaySwipeableViews index={index} onChangeIndex={this.handleChangeIndex.bind(this)}>
                    {
                        this.props.banners.map((item,index)=>{
                            const slideb='slide'+index;
                            return(
                                <div style={Object.assign({},  styles[slideb])} key={index}>
                                    <img src={item.imageUrl} alt="" />
                                    <img src={item.backgroundUrl} alt=""/>
                                </div>
                            )
                        })
                    }
                </AutoPlaySwipeableViews>
                {/*<Pagination dots={3} index={index} onChangeIndex={this.handleChangeIndex} />*/}
            </div>
        );
    }
}

export default Banner;